<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import zzjgService from '@/api/zzjg'

import { useMainStore } from '@/store/main'
import { ElMessage } from 'element-plus'
import { useZzjgStore } from '@/store/zzjg'
const userInfo = useMainStore().userInfo
const props = defineProps({
  record: {
    type: Object,
  },
})
const lists = ref<any[]>([])
const activeKey = ref<any[]>([])
const checkItems = ref<any[]>([])
const spxsmcLists = ref<any[]>([])
const mrzjldml = ref<any[]>([])
function fiterNodes(data: any[]) {
  const arr: any[] = []
  const fn = (data: any[]) => {
    for (const item of data) {
      if (item.check) {
        arr.push(item)
      }
      if (item.children.length > 0) {
        fn(item.children)
      }
    }
  }
  fn(data)
  return arr
}
const mrzjldTreeList = async () => {
  const params = {
    dwbm: userInfo.dwbm,
    // 添加人员传空
    id: (props.record && props.record.rybm) || '',
  }
  mrzjldml.value = (await zzjgService.queryByDwbm(params)) as unknown as any[]
}
// 审批显示名称
const getSpxsmcLists = async () => {
  spxsmcLists.value = (await zzjgService.addBtnSpxsmc()) as unknown as any[]
}
// left
const queryByDwjsbmApi = async () => {
  const data = {
    dwbm: userInfo.dwbm,
    rybm: (props.record && props.record.rybm) || '',
  }
  const res = await zzjgService.queryByDwjsbm(data)
  lists.value = res.data[0].children

  // 点击角色 添加人员
  if (props.record?.level === '3') {
    const diGui = (m: any[], val: string) => {
      for (const item of m) {
        if (item.id === val) {
          item.check = true
          break
        } else if (item.children && item.children.length > 0) {
          diGui(item.children, val)
        }
      }
    }
    diGui(lists.value, props.record.id)
  }

  // debugger;
  // 筛选选中节点  渲染右边

  checkItems.value = fiterNodes(lists.value)
  useZzjgStore().CHANGEROLEINFO(checkItems.value)
}
const item1Click = (item1: any) => {
  if (!item1.check && checkItems.value.length > 9) {
    ElMessage.error('最多选10个')
    return
  }
  item1.check = !item1.check
  checkItems.value = fiterNodes(lists.value)
  useZzjgStore().CHANGEROLEINFO(checkItems.value)
}
onMounted(() => {
  queryByDwjsbmApi()
  getSpxsmcLists()
  mrzjldTreeList()
})
watch(
  () => props.record,
  () => {
    queryByDwjsbmApi()
    getSpxsmcLists()
    mrzjldTreeList()
  },
)
const defaultProps = {
  children: 'children',
  label: 'mc',
}
</script>

<template>
  <div class="rolemessage">
    <div class="left">
      <div class="rolemessageHeader">角色</div>
      <el-scrollbar max-height="calc(100vh - 350px)">
        <el-collapse v-model="activeKey">
          <el-collapse-item :key="item.key" v-for="item in lists" :title="item.mc">
            <div class="box">
              <div style="margin-top: 10px; height: auto; overflow: hidden">
                <div
                  class="btn-item"
                  :class="[item1.check ? 'btn_active' : '']"
                  @click="item1Click(item1)"
                  style="margin: 0 10px 10px 0; float: left"
                  v-for="item1 in item.children"
                  :key="item1.id"
                >
                  {{ item1.mc }}
                </div>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-scrollbar>
    </div>
    <div class="right">
      <div class="rolemessageHeader">已选择角色</div>
      <div style="padding: 10px">
        <table style="table-layout: fixed" class="zzjgTable" aria-describedby="角色">
          <tr>
            <th>部门</th>
            <th>角色</th>
            <th>审批级别</th>
            <th>直接领导</th>
          </tr>
          <tr v-for="el in checkItems" :key="el.id">
            <td>{{ el.gn }}</td>
            <td>{{ el.mc }}</td>
            <td>
              <el-select v-model="el.spjbbm" style="width: 100%">
                <el-option
                  :label="item.spjbmc"
                  :value="item.spjbbm"
                  v-for="(item, i) in spxsmcLists"
                  :key="i"
                />
              </el-select>
            </td>
            <td style="width: 100%; padding-right: 0">
              <el-tree-select
                v-model="el.zjldbm"
                show-search
                :data="mrzjldml"
                :props="defaultProps"
                node-key="id"
                style="width: 100%"
                check-strictly
                allow-clear
              />
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.rolemessage {
  display: flex;
  height: calc(100vh - 300px);
  .left {
    width: 380px;
    border: 1px solid #dcdcdc;
    margin-right: 10px;
  }
  .right {
    width: calc(100% - 390px);
    border: 1px solid #dcdcdc;
  }
}
.zzjgTable {
  width: 100%;
  height: 100%;
  tr,
  th,
  td {
    border: 1px solid #dcdcdc;
    height: 36px;
    text-align: right;
    padding-right: 10px;
    color: #666;
    font-weight: normal;
    border-collapse: collapse; //不加上这个会重合边框
  }
}
.rolemessageHeader {
  font-size: 16px;
  padding-left: 10px;
  line-height: 38px;
  height: 38px;
  font-weight: bolder;
  color: #666;
  border-bottom: 1px solid #dcdcdc;
}
:deep(.el-collapse-item) {
  .el-collapse-item__content {
    padding-left: 16px !important;
  }
}
</style>
